<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-preview-main">
      <div style="display: flex;">
        <div id="chart1" style="width:400px;height:400px;"></div>
        <div id="chart2" style="width:400px;height:400px;"></div>
        <div id="chart3" style="width:400px;height:400px;"></div>
        <div id="chart4" style="width:400px;height:400px;"></div>
      </div>
    </div>
  </div>


</template>

<script>
  import echarts from 'echarts'
  import resize from '@/components/Charts/mixins/resize'
  export default {
    components: {},
    mixins: [resize],
    props: {},
    data() {
      return {
        chart1: null,
        chart2: null,
        chart3: null,
        chart4: null,
      };
    },
    created() {},
    mounted() {
      this.initChart()
    },
    methods: {
      initChart() {
        const option1 = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            left: 'center',
            top: 'bottom',
            data: ['剩余费用', '招待费']
          },
          series: [{
            name: '',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: [{
                value: 335,
                name: '剩余费用'
              },
              {
                value: 310,
                name: '招待费'
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
        const option2 = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            left: 'center',
            top: 'bottom',
            data: ['剩余费用', '办公费']
          },
          series: [{
            name: '',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: [{
                value: 335,
                name: '剩余费用'
              },
              {
                value: 310,
                name: '办公费'
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
        const option3 = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            left: 'center',
            top: 'bottom',
            data: ['剩余费用', '公车费']
          },
          series: [{
            name: '',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: [{
                value: 335,
                name: '剩余费用'
              },
              {
                value: 310,
                name: '公车费'
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
        const option4 = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            left: 'center',
            top: 'bottom',
            data: ['剩余费用', '会议费']
          },
          series: [{
            name: '',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: [{
                value: 335,
                name: '剩余费用'
              },
              {
                value: 310,
                name: '会议费'
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
        this.chart1 = echarts.init(document.getElementById('chart1'))
        this.chart2 = echarts.init(document.getElementById('chart2'))
        this.chart3 = echarts.init(document.getElementById('chart3'))
        this.chart4 = echarts.init(document.getElementById('chart4'))
        this.chart1.setOption(option1);
        this.chart2.setOption(option2);
        this.chart3.setOption(option3);
        this.chart4.setOption(option4);
        window.onresize = this.chart1.resize()
        window.onresize = this.chart2.resize()
        window.onresize = this.chart3.resize()
        window.onresize = this.chart4.resize()
      }
    },
  }

</script>
<style scoped></style>
